<template>
  <div id="content">
    <!-- 返回标签 -->
    <el-page-header @back="goBack" content="详情"> </el-page-header>
    <div class="message_box">
      <div class="header">
        <div class="avatar" @click="toUserInfo">
          <el-avatar :src="messageDetail.avatar"></el-avatar>
        </div>
        <div class="username_time">
          <div class="username" @click="toUserInfo()">
            {{ messageDetail.nickname }}
          </div>
          <div class="time">
            <i class="el-icon-pie-chart"></i>{{ messageDetail.date }}
          </div>
        </div>
        <el-button
          v-if="messageDetail.uid == myInfo.uid"
          type="danger"
          style="margin-left: 150px"
          size="mini"
          @click="deleteMessage"
          >删除</el-button
        >
      </div>
      <!-- 帖子内容 -->
      <div class="message-content">
        <h4>{{ messageDetail.title }}</h4>
        <p>{{ messageDetail.content }}</p>
        <div class="message-imgs" v-if="messageDetail.images.length != 0">
          <div class="imgsbox" v-if="messageDetail.images.length == 1">
            <el-image
              :preview-src-list="messageDetail.images"
              :src="messageDetail.images[0]"
              style="
                max-width: 353px;
                max-height: 310px;
                object-fit: cover;
                border-radius: 5px;
              "
            ></el-image>
          </div>
          <div
            class="imgsbox"
            v-if="
              messageDetail.images.length >= 2 &&
              messageDetail.images.length <= 4
            "
          >
            <el-image
              v-for="(imgs, index) in messageDetail.images"
              :key="index"
              :src="imgs"
              :preview-src-list="messageDetail.images"
              style="width: 46%; margin-right: 10px; display: inline-block"
            ></el-image>
          </div>

          <div class="imgsbox" v-if="messageDetail.images.length > 4">
            <el-image
              v-for="(imgs, index) in messageDetail.images"
              :key="index"
              :src="imgs"
              :preview-src-list="messageDetail.images"
              style="display: inline-block; width: 30%; margin-right: 10px"
            ></el-image>
          </div>
        </div>
      </div>
    </div>
    <!-- 点赞和评论 -->
    <div class="supportedcomment">
      <i
        class="iconfont"
        :style="
          messageDetail.mark == 1
            ? 'color:#0074e8;font-size:24px'
            : 'font-size:20px;color:black'
        "
        @click="kudos"
        >&#xe68e;</i
      >
      <i class="iconfont" style="font-size: 22px" @click="tocomment"
        >&#xe675;</i
      >
    </div>
    <!-- 点赞人 -->
    <div class="liked">
      <i class="iconfont" style="font-size: 18px; margin-right: 4px"
        >&#xe68e;</i
      >
      <div
        style="display: inline-block"
        v-for="(item, index) in kudosPeople"
        :key="index"
      >
        <span>{{ item.nickname }}</span
        ><span v-if="index != kudosPeople.length - 1">、</span>
      </div>
      <span v-if="kudosPeople.length != 0">觉得很赞</span>
    </div>
    <!-- 评论区 -->
    <miniComments
      ref="child"
      :message="messageDetail"
      :userInfo="myInfo"
    ></miniComments>
  </div>
</template>

<script>
// import { mapState } from "vuex";
import miniComments from "@/pages/miniComments";
export default {
  name: "detail-message",
  props: ["message", "userInfo"],
  components: {
    miniComments,
  },

  data() {
    return {
      messageDetail: {},

      myInfo: {},
      kudosPeople: [],
    };
  },
  computed: {},

  methods: {
    goBack() {
      // this.$router.push("/home");
      this.$router.go(-1);
    },

    // 将message和userinfo持久化存储
    getmessage(param) {
      if (param) {
        this.messageDetail = JSON.parse(localStorage.getItem("message"));
      } else {
        this.messageDetail = this.message;
      }
    },
    getUserInfo(param) {
      if (param) {
        this.myInfo = JSON.parse(localStorage.getItem("user"));
      } else {
        this.myInfo = this.userInfo;
      }
    },

    // 浏览量+1
    async addViews() {
      await this.$API.reqAddViews(this.messageDetail.mid);
    },

    // 点赞
    async kudos() {
      if (this.messageDetail.mark == 0) {
        let result = await this.$API.reqKudos(this.messageDetail.mid);
        if (result.code == 2000) {
          this.messageDetail.mark = 1;
          this.kudosPeople.unshift({
            avatar: this.myInfo.avatar,
            nickname: this.myInfo.nickname,
            uid: this.myInfo.uid,
          });
        }
      } else {
        let result = await this.$API.reqCancelKudos(this.messageDetail.mid);
        if (result.code == 2000) {
          this.messageDetail.mark = 0;
          this.kudosPeople.forEach((item, index) => {
            if (item.uid == this.myInfo.uid) {
              this.kudosPeople.splice(index, 1);
            }
          });
        }
      }
    },
    // 评论
    tocomment() {
      this.$refs.child.sendFatherComment();
    },
    // 删帖
    async deleteMessage() {
      let result = await this.$API.reqDeleteMessage(this.messageDetail.mid);
      if (result.code == 2000) {
        this.$router.push("/home");
      }
    },
    // 查看个人信息
    toUserInfo() {
      this.$router.push({
        name: "myInfo",
        params: { uid: this.messageDetail.uid },
      });
    },

    // 得到点赞人
    async getKudosPeople() {
      let num = 10;
      let result = await this.$API.reqKudosPeople(this.messageDetail.mid, num);
      if (result.code == 2000) {
        this.kudosPeople = result.data;
      }
    },
  },
  watch: {},
  created() {
    //在页面加载时读取localStorage里的状态信息
    if (localStorage.getItem("message")) {
      this.getmessage(1);
      this.getUserInfo(1);
    } else {
      this.getmessage();
      this.getUserInfo();
      localStorage.setItem("message", JSON.stringify(this.message));
      localStorage.setItem("user", JSON.stringify(this.userInfo));
    }
  },
  mounted() {
    this.addViews();
    this.getKudosPeople();
  },

  beforeDestroy() {
    localStorage.removeItem("message");
    localStorage.removeItem("user");
  },
  destroyed() {
    localStorage.removeItem("message");
    localStorage.removeItem("user");
  },
};
</script>

<style lang="less" scoped>
@font-face {
  font-family: "iconfont"; /* Project id 3753444 */
  src: url("../../assets/font/iconfont.woff2?t=1667742304978") format("woff2"),
    url("../../assets/font/iconfont.woff?t=1667742304978") format("woff"),
    url("../../assets/font/iconfont.ttf?t=1667742304978") format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#content {
  .message_box {
    margin-top: 15px;
    .header {
      .avatar {
        margin: 3px;
        margin-right: 5px;
      }
      display: flex;
      align-items: center;
      .username_time {
        .username {
          font-size: 14px;
          color: #1ca5fc;
          font-weight: 550;
        }
        .time {
          font-size: 10px;
          color: #9b9b9b;
        }
      }
    }
  }
  .supportedcomment {
    height: 35px;
    margin-top: 8px;
    i {
      float: right;
      // font-size: 25px;
      line-height: 35px;
      margin-right: 15px;
    }
  }
  .liked {
    margin-top: 3px;
  }
}
</style>